<template>
    <el-dialog :model-value="dialogVisible" :title="dialogTitle" width="35%" @close="handleClose">
        <!-- 表单开始 -->
        <el-form ref="formRef" :model="form" label-width="80px" :rules="rules">
            <!-- 备注信息 -->
            <el-form-item label="备注信息" prop="mem">
                <el-input v-model="form.mem" />
            </el-form-item>
        </el-form>
        <!-- 操作栏 -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps, watch } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()

let form = reactive({
    mem: '',
})

const rules = reactive({
    mem: [
        { required: true, message: '请输入备注信息', trigger: 'blur'},
        { min:1, max:50, message: '备注信息在0-50个字之间', trigger: 'blur'}
    ],
})

let dialogVisible = ref(false)

let dialogTitle = ref('添加备注信息')

const emits = defineEmits(['update', 'pushIntoRecord'])

const handleClose = () => {
    emits('update')
}

const handleConfirm = () => {
    formRef.value?.validate(async (valid) => {
        if (valid) {
            emits('pushIntoRecord', form.mem)
        } else {
            console.log('error submit!!')
            return false
        }
    })
}

</script>
<style lang='scss' scoped>

</style>
